<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function checkAll(){
            let hobbies = document.getElementsByName("hobby");
            for(let i = 0; i < hobbies.length; i++){
                hobbies[i].checked = true;
            }
        }

        function checkNo(){
            let hobbies = document.getElementsByName("hobby");
            for(let i = 0; i < hobbies.length; i++){
                hobbies[i].checked = false;
            }
        }

        function checkReverse(){
            let hobbies = document.getElementsByName("hobby");
            for(let i = 0; i < hobbies.length; i++){
                // if简化
                hobbies[i].checked = !hobbies[i].checked;
            }
        }
    </script>
</head>
<body>
    兴趣爱好:
    <input type="checkbox" name="hobby" value="cpp">C++
    <input type="checkbox" name="hobby" value="java">Java
    <input type="checkbox" name="hobby" value="js">JavaScript
    <br>

    <button onclick="checkAll();">全选</button>
    <button onclick="checkNo();">全不选</button>
    <button onclick="checkReverse();">反选</button>
</body>
</html>